<template>
	<view class="index container">
		<view class="fixed-top">
			<!-- 搜索框 -->
			<view class="search" @click="toSearch">
				<input class="search-input" type="text" value="" placeholder="想要,不妨来搜一搜"  disabled="true"/>
			</view>
			<!-- 分类 -->
			<view class="classify">
				<view class="classify-l">
					<view :class="{'color1': classifyId == ''}" @click="toHomePage">商城精选</view>
					<view v-for="(item, i) in classifyList" 
								:key="i"
								:class="{'color1': classifyId == item.classifyId}"
								@click="toClassifyPage(item.classifyId)">
						{{item.classifyName}}
					</view>
				</view>
				<view class="classify-r" @click="showClassify=!showClassify"></view>
			</view>
			<view class="classify-box" v-show="showClassify">
				<text class="box-item" :class="{'select': classifyId == ''}" @click="toHomePage">商城精选</text>
				<text class="box-item"
							v-for="(item, i) in classifyList" 
							:class="{'select': classifyId == item.classifyId}"
							@click="toClassifyPage(item.classifyId)"
							:key="i">{{item.classifyName}}</text>
			</view>
		</view>
		<view class="show-bg" v-show="showClassify"></view>
		
		<view class="scroll">
			<view v-show="classifyId == ''">
				<home-page></home-page>
			</view>
			<view  v-show="classifyId != ''">
				<other-page :classifyId="classifyId"></other-page>
			</view>
			<!-- 底部栏 -->
			<commonTabbar></commonTabbar>
		</view>
	</view>
</template>

<script>
	import Api from '../../../util/api.js'
	import commonTabbar from '../../../components/commonTabbar.vue'
	import HomePage from '../modules/homePage.vue'
	import OtherPage from '../modules/otherPage.vue'
	export default {
		components: {
			commonTabbar,
			HomePage,
			OtherPage
		},
		data() {
			return {
				classifyList:[],
				classifyId: '',
				showClassify:  false,
			}
		},
		onLoad() {
			this.initClassify();
		},
		methods: {
			/* 查询一级分类 */
			initClassify(){
				Api.fetchPost('/fsbus/D3002',{}).then(res=>{
					if(res.errorNo == 0){
						this.classifyList = res.results.data;
					}
				}).then(err=>{
					
				})
			},
			toHomePage(){
				this.classifyId = '';
				this.showClassify = false;
			},
			toClassifyPage(id){
				this.classifyId = id;
				this.showClassify = false;
			},
			toSearch(){
				uni.navigateTo({
						url: '/pages/product/search/search'
				});
			},
		}
	}
</script>

<style>
.index {
	font-size: 24upx;
	overflow: hidden;
	padding-top: 210upx;
}
.fixed-top {
	width: 100%;
	position: fixed;
	top: 0;
	background-color: #fff;
	padding: 0 30upx;
	z-index: 101;
}
.search {
	height: 66upx;
	background-color: #E6E6E6;
	/* background: url(../../../static/index/search.png) no-repeat 10upx center #E6E6E6; */
	background-size: 40upx;
	border-radius: 66upx;
	margin-top: 30upx;
	padding-left: 60upx;
}
.search .search-input{
	width: 100%;
	height: 66upx;
}
.classify {
	height: 110upx;
	line-height: 110upx;
	display: flex;
}
.classify .classify-l {
	flex: 1;
	display: flex;
	font-size: 30upx;
	color: #666;
}
 .classify .classify-l view {
	 padding-right: 35upx;
 }
.classify .classify-r {
	width: 60upx;
	/* background: url(../../../static/index/down.png) no-repeat center; */
	background-size: 26upx;
}
.show-bg {
	width: 100%;
	height: 100%;
	position: fixed;
	background-color: rgba(0,0,0,.5);
	top: 0;
	left: 0;
	z-index: 100;
}

.classify-box {
	padding-top: 30upx;
}
.classify-box .box-item {
	display: inline-block;
	border: 1px solid #F52A4C;
	border-radius: 4upx;
	color: #F52A4C;
	padding: 10upx 16upx;
	margin-right: 30upx;
	margin-bottom: 30upx;
	font-size: 26upx;
}
.classify-box .box-item.select {
	background-color: #F52A4C ;
	color: #fff;
}

</style>
